<template>
  <div class="order">

    <header class="page-header no-print">订单管理</header>
    <div class="btn-group">
      <el-button type="primary" @click="new_order">新增订单</el-button>
    </div>

    <div class="order_search">
      <el-form :inline="true"   class="order_search">
        <el-form-item label="名称">
          <el-input v-model="order_search.name" placeholder="订货人名字"></el-input>
        </el-form-item>
        <el-form-item label="是否付款">
          <el-select v-model="order_search.ispay" @change="order_search_handler" placeholder="选择状态">
            <el-option v-for="item in ispays" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="order_search.status" @change="order_search_handler" placeholder="选择状态">
            <el-option v-for="item in status" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="order_search_handler">查询</el-button>
          <!-- <el-button type="info" @click="reset">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>


    <el-table :data="order_list" border style="width: 100%">
      <el-table-column fixed  prop="user.name" label="店主"> </el-table-column>
      <el-table-column prop="user.phone" label="电话"> </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">
            <span>{{scope.row.ctime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user.address" label="地址"> </el-table-column>
      <el-table-column label="是否付款">
        <template slot-scope="scope">
            <span>{{ispay_label(scope.row.ispay)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
            <span>{{status_label(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="order_detail_fo(scope.row.id)">查看订单</el-button>
            <el-popover @hide="resetAddGoodsInfo" placement="top-start" title="编辑订单" width="300" trigger="click">
              <el-form :inline="true">
                <el-form-item label="状态">
                  <el-select  v-model="edit_order_p.status">
                    <el-option v-for="item in status" :key="item.id" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否付款">
                  <el-select v-model="edit_order_p.ispay">
                    <el-option v-for="item in ispays" :key="item.id" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="confirm_edit">确认编辑</el-button>
                </el-form-item>
              </el-form>
              <el-button type="text" size="small" slot="reference" @click="edit_order(scope.row)">编辑订单</el-button>
            </el-popover>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="2"
      layout="prev, pager, next"
      @current-change="order_page_change"
      :total="total">
    </el-pagination>
    <el-dialog title="订单详情" :visible.sync="orderDetailVisible" :modal-append-to-body="false">
      <h3 class="title">胡四批发部送货单</h3>
      <p class="getName">
        <span>收货人：{{order_detail.user.name}}</span>
        <span>联系电话:{{order_detail.user.phone}}</span>
      </p>
      <p class="getName">
        <span>收货地址：{{order_detail.user.address}}</span>
      </p>
      <el-table :data="order_detail.product">
        <el-table-column property="name" label="商品"></el-table-column>
        <el-table-column property="price" label="单价"></el-table-column>
        <el-table-column property="num" label="数量"></el-table-column>
        <el-table-column label="总计">
          <template slot-scope="scope">
            <span>{{parseInt(scope.row.price) * parseInt(scope.row.num)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" slot="reference" @click="del_product(scope.row.o_pid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="btn-group">
        <el-button type="text" size="small" @click="printOrder(order_detail.order_id)">打印订单</el-button>
        <el-popover @hide="resetAddGoodsInfo" placement="top-start" :title="'添加商品（'+ order_detail.user.name +')'" width="300" trigger="click">
          <el-form :inline="true">
            <el-form-item label="商品">
              <el-select v-model="addGoodsInfo.id" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="search_goods">
                <el-option v-for="item in _goods_list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="addGoodsInfo.num"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="confirmAddGoods(order_detail.id)">确认增加</el-button>
            </el-form-item>
          </el-form>
          <el-button type="text" size="small" slot="reference">添加商品</el-button>
        </el-popover>
      </div>
    </el-dialog>

    <el-dialog title="新增订单" :visible.sync="new_order_visible" :modal-append-to-body="false" :before-close="reset_o_p">
      <el-form>
        <el-form-item label="用户">
          <el-select v-model="new_order_p.userid" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="search_user">
            <el-option v-for="item in user_list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品列表">
          <el-table :data="new_order_p.product">
            <el-table-column property="name" label="商品"></el-table-column>
            <el-table-column property="price" label="单价"></el-table-column>
            <el-table-column property="num" label="数量"></el-table-column>
            <el-table-column label="总计">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.price) * parseInt(scope.row.num)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        
        <el-form-item>
          <el-button type="success" @click="new_order_confirm(order_detail.id)">确认增加</el-button>
          <el-popover @hide="reset_o_add" placement="top-start" title="新增商品" width="300" trigger="click">
          <el-form :inline="true">
            <el-form-item label="商品">
              <el-select v-model="new_o_add.id" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="search_goods">
                <el-option v-for="item in _goods_list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="new_o_add.num"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="new_o_confirm()">确认增加</el-button>
            </el-form-item>
          </el-form>
          <el-button type="text" size="small" slot="reference">添加商品</el-button>
        </el-popover>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "order",
  data() {
    return {
      orderDetailVisible: false,
      new_order_visible: false,
      addGoodsInfo: {
        num: "",
        id: "",
      },
      order_search:{
        name:'',   //电话号码，名字，名字简写,
        ispay: 0,
        status: 0,
        current_page: 1,
        page_size: 2
      },
      edit_order_p:{
        id: '',
        ispay: '',
        status: ''
      },
      ispays:[
        {id: 0, value: '全部'},
        {id: 1, value: '已付款'},
        {id: 2, value: '未付款'},
      ],
      status:[
        {id: 0, value: '全部'},
        {id: 1, value: '下单成功'},
        {id: 2, value: '正在拣货'},
        {id: 3, value: '已取消'},
        {id: 4, value: '正在下单'},
        {id: 5, value: '已送货'}
      ],
      new_order_p:{
        userid: '',
        product:[]
      },
      new_o_add: {
        id: '',
        num: ''
      }
    };
  },
  computed: {
    ...mapGetters({
      order_list: "order/order_list",
      total: "order/total",
      order_detail: 'order/order_detail',
      _goods_list: 'order/goods_list',
      user_list: 'order/user_list',
    })
  },
  methods: {
    order_detail_fo(orderId) {
      this.orderDetailVisible = true;
      this.$store.dispatch('order/order_detail', {
        orderid: orderId
      })
    },
    status_label(status) {
      for(var i = 0; i < this.status.length; i++) {
        if(this.status[i].id == status) {
          return this.status[i].value
        }
      }
    },
    ispay_label(ispay){
      if(ispay == 1) {
        return '已付款'
      }
      if(ispay == 2) {
        return '未付款'
      }
    },
    edit_order(row) {
      for (var i in this.edit_order_p) {
        this.edit_order_p[i] = row[i]
      }
    },
    del_product(id) {
      this.$store.dispatch('order/del_product', {order_product_id: id})
    },
    new_order() {
      this.new_order_visible = true
    },
    confirm_edit() {
      this.$store.dispatch('order/edit_order', {modify:this.edit_order_p, search: this.order_search})
    },
    new_o_confirm() {
      this.$store.dispatch('order/product_detail', {id: this.new_o_add.id})
      // this.new_order_p.product.push({
      //   id: this.new_o_add.id,
      //   num: this.new_o_add.num,
      // })
    },
    new_order_confirm() {
      this.$store.dispatch('order/create_order', {
        userid: this.new_order_p.userid,
        product: JSON.stringify(this.new_order_p.product)
      })
    },
    order_search_handler() {
      this.$store.dispatch('order/get_order_list', this.order_search)
    },
    search_goods(str) {
      this.$store.dispatch('order/goods_search',{
        name: str
      })
    },
    search_user(str) {
      this.$store.dispatch('order/user_search', {
        name: str
      })
    },
    printOrder(id) {
      let routeData = this.$router.resolve({ path: "/orderPrint/" +  id});
      window.open(routeData.href, "_blank");
    },
    confirmAddGoods(id) {
      var modify = {
        orderid: id,
        product: JSON.stringify(this.addGoodsInfo)
      }
      if(!parseInt(this.addGoodsInfo.num)){
        this.$message.error('请输入正确的商品数量')
        return
      }else{
        this.$store.dispatch('order/modify_order', {modify: modify, order_search:this.order_search, order_detail_search:{orderid: id}})
      }
    },
    order_page_change(current) {
      this.order_search.current_page = current
      this.$store.dispatch('order/get_order_list', this.order_search)
    },
    resetAddGoodsInfo(params) {
      this.addGoodsInfo = {
        product: "",
        orderid: ""
      }
    },
    reset_o_add() {
      this.new_o_add = {
        id: '',
        num: ''
      };

    },
    reset_o_p() {
      this.new_order_p = {
        userid: '',
        product: []
      }
      this.new_order_visible = false
    }
  },
  created() {
    this.$store.dispatch('order/get_order_list', this.order_search)
    this.$store.commit("order/SET_VM", { vm: this });
  }
};
</script>

<style lang="scss">
.order {
  .btn-group {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .title {
    text-align: center;
  }
  .getName {
    text-align: center;
  }
}
</style>


